<template>
  <div id="detailed">
    <c-title :hide="false"
             text='我的评价'></c-title>
    <van-sticky>
      <van-tabs v-model="selected" @click="swichTabTItem" sticky title-inactive-color="#999999" title-active-color="#333333">
        <van-tab name="0" :title="`待评价·${waitLength}`"></van-tab>
        <van-tab name="1" :title="`已评价${commentLength?'·'+commentLength:''}`"></van-tab>
      </van-tabs>
    </van-sticky> 
    <div style="width: 100%; height: 0.0625rem;"></div>
    <!-- tab-container -->
    <div  class="orderhoet-main">
      <keep-alive>
        <recommended  :commList="wait" v-show="selected == 0"></recommended>
      </keep-alive>
      <keep-alive>
        <rated :commList="wait" v-if="selected == 1"></rated>
      </keep-alive>
    </div>
    <div class="mh60"></div>
  </div>
</template>
<script>
import myEvaluation from "./myEvaluation_controller";

export default myEvaluation;

</script>
<style lang="scss" rel="stylesheet/scss" scoped>
  .pl {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .ell {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    /* 定义显示的行数 */
    overflow: hidden;
  }
  .mh60 {
    height: 60px;
    clear: both;
  }
  #detailed ::v-deep .van-tab--active {
    font-weight: bold;
  }
  #detailed ::v-deep .van-tabs__nav--line {
    padding-bottom: 8px;
  }
  .orderhoet-main {
    margin:0.5rem 0.75rem 0 0.75rem;
  }
  #detailed {
    a {
      color: #000;
    }

    .butts {
      // position: absolute;
      // right: 0.75rem;
      text-align: right;
      color: #333;

      span {
        padding: 0.25rem 0.625rem;
        border-radius: 15px;
        border: solid 0.0625rem #b1a6a6;
        display: inline-block;
        margin-right: 0.5rem;
      }
    }


 



    .pj {
      background: #fff;
      padding: 0 0.625rem;

      p {
        text-align: left;
        margin: 0;
      }

      img {
        width: 100%;
      }
    }

    .pic {
      display: flex;
      align-items: stretch;
      flex-flow: row wrap;
      background: #fff;
    }

    .mint-navbar .mint-tab-item {
      padding: 0.875rem 0;
    }

    .qtpl {
      text-align: right;
      width: 100%;

      span {
        background: #fff;
        border: #b1a6a6 solid 0.0625rem;
        padding: 0.125rem 1.25rem;
        border-radius: 0.625rem;
      }
    }

    .pall {
      margin-bottom: 0.625rem;
    }
  }
</style>
